<template>
	<view v-if="data">
		<uni-list>
			<uni-list-item
				v-for="(item, index) in data.data"
				:key="index"
				showArrow
				clickable
				:to="`../goods-details/goods-details?lid=${item.lid}`"
			>
				<!-- 使用插槽写入内容 -->
				<template slot="body">
					<view class="cell">
						<image
							:src="`http://www.codeboy.com:9999/${item.pic}`"
						></image>
						<view>
							<view>{{ item.title }}</view>
							<view>¥{{ item.price }}</view>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- 加载更多组件 -->
		<uni-load-more :status="status"></uni-load-more>
		<!-- 回到顶部按钮 -->
		<view class="btn-gotop" v-show="showBtn" @click="goTop">
			<uni-icons type="arrowthinup" color="white" size="20"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: null,
			status: 'more',
			showBtn:false
		};
	},
	// 监控滚动
	onPageScroll(e) {
		this.showBtn = e.scrollTop > 1500
	},
	// 下拉
	onPullDownRefresh(){
		// 加载第一页
		this.getData()
	},
	// 触底
	onReachBottom() {
		// 加载组件状态 修改为加载中
		this.status = 'loading';
		// 当前页和最大页
		const { pno, pageCount } = this.data;
		// 当前页已经是最大页数 后续没有数据了 就退出不加载了
		if (pno == pageCount) {
			this.status = 'noMore';
			return;
		}
		this.getData(pno + 1);
	},
	mounted() {
		this.getData();
	},
	methods: {
		goTop(){
			uni.pageScrollTo({
				scrollTop:0,
				duration:250
			})
		},
		getData(pno = 1) {
			const url = 'http://www.codeboy.com:9999/data/product/list.php';
			uni.request({
				url,
				method: 'GET',
				data: { pno },
				success: res => {
					// 停止下拉状态
					uni.stopPullDownRefresh();
					console.log(res);
					if (pno > 1) {
						res.data.data = [...this.data.data, ...res.data.data];
					}
					this.data = res.data;
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.cell {
	display: flex;
	> image {
		width: 180rpx;
		height: 180rpx;
		flex: none;
	}
	> view {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		> view:first-of-type {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		> view:last-of-type {
			color: red;
			font-size: 1.1em;
			font-weight: bold;
		}
	}
}
</style>
